---
title: Sheet
description: A slide-in panel for presenting additional content without disrupting the main screen.
order: 2
references: ["https://react-spectrum.adobe.com/react-aria/Modalhtml#props"]

published: true
---

## Basic
A sheet is a modal component that slides in from the side of the screen. It's used to display a small amount of content that is related to the main content.
<How toUse="overlays/sheet/sheet-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/sheet
```

## Composed components
<Composed components={['dialog']} />

## Manual installation

```bash
npm i react-aria-components tailwind-merge tailwind-variants
```

<SourceCode toShow='sheet' />

## Anatomy
```
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
```

```
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>Sheet Description</SheetDescription>
    </SheetHeader>
    <SheetBody>Sheet Body</SheetBody>
    <SheetFooter>
      <SheetClose>Cancel</SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```


## Like github
This example is like Github's profile page. You can see the sheet component is used to display the profile information.

<How toUse="overlays/sheet/sheet-menu-demo" />

## Controlled
You can control the open state of the sheet by using the `isOpen` prop. You can also use the `onOpenChange` prop to listen to the open state change.
<How toUse="overlays/sheet/sheet-controlled-demo" />

## Positioning
You can position the modal component in different ways. You can use the `side` prop to position the modal component in the different directions.

<How toUse="overlays/sheet/sheet-position-demo" />

## Custom close
You can customize the close button by using the `SheetClose` component. This example demonstrates how to use the `SheetClose` component to create a custom close button.

<How toUse="overlays/sheet/sheet-custom-close-demo" />

## Float
By default, the sheet will stack, but you can change this behavior by using the `isFloat` prop. This example demonstrates how to use the `isFloat` prop to create a sheet that does not stack.
<How toUse="overlays/sheet/sheet-float-demo" />

## Sticky
You can use the `SheetBody` component to make the sheet sticky.
<How toUse="overlays/sheet/sheet-sticky-demo" />
